import React,{Component} from 'react';
import $ from 'jquery';
import { Table,Button,Icon,Modal, message } from 'antd';
import reqwest from 'reqwest';
import history from '../history';
import CreateArtical from './CreateArtical';
import UpdateArtical from './UpdateArtical';
// import LineWrap from './LineWrap';
// require ('./Artical.css');

class Artical extends Component{
    constructor(props){
        super(props);
        this.state={
          data: [],
          loading: false,
        }
    };
    componentDidMount(){
      this.fetch();
    }


    //新增的方法
    addModul=()=>{
      this.getFormValue.refs.wrappedComponent.showModal();
    }

    updateModul=(record) => {
      this.getValue.refs.wrappedComponent.init(record);
      this.getValue.refs.wrappedComponent.showModal();
    }

    //删除的方法
    deleModul=(record,e)=>{
      e.stopPropagation();
      Modal.confirm({
      title:'提示',
      content:`是否删除${record.title}`,
      cancelText:'取消',
      okText:'确定',
      onOk:()=>{
             $.ajax({
                url : "http://localhost:8007/artical/delete", // 数据发送方式
                type : "post", // 接受数据格式
                data:record.id,
                dataType: "json",
                contentType:"application/json",
                    success :() => {
                          message.success('删除成功')
                          this.fetch();
                    }
              });
             }
          });
      }

    fetch = () => {
      this.setState({ loading: true });
      reqwest({
        url: 'http://localhost:8007/artical/list',
        method: 'get',
        data: {

        },
        type: 'json',
      }).then((data) => {
        this.setState({
          loading: false,
          data: data.results,
        });
      });
    }
    


    render(){


      const pagination = {
        pageSize:8
      }

      const columns = [{
        title: '标题',
        dataIndex: 'title',
        render: text => <a href="javascript:;">{text}</a>,
      },
      // {
      //   title: '内容',
      //   dataIndex: 'content',
      //   width: '20%',
      //   render:(text,record) => {
      //     return <LineWrap title={text} lineClampNum={2} />
      //   }
      // },
      {
        title: '作者',
        dataIndex: 'author',
      },
      {
        title: '类型',
        dataIndex: 'type',
      },
      {
        title: '标签',
        dataIndex: 'sign',
      }, {
        title:'创建时间',
        dataIndex:'createtime',
      },{
        title:'修改时间',
        dataIndex:'updatetime',
      },{
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
                < a href="Javascript:;" title='编辑' onClick={this.updateModul.bind(this,record)}>编辑</ a>
                    <span className="ant-divider" />
                < a href="Javascript:;" title='删除' onClick={this.deleModul.bind(this,record)}>删除</ a>
          </span>
        ),
      }];
 

        return(
        <div className="essaydiv">

        <Button type="primary" className="buttons" onClick={this.addModul.bind(this)}>
            <Icon type="heart" theme="twoTone" twoToneColor="#eb2f96" />写文章
        </Button>
        <CreateArtical ref={ref=>this.getFormValue=ref} fetch={this.fetch}/>
        <UpdateArtical ref={ref=>this.getValue=ref} fetch={this.fetch}/>
        <Table
                columns={columns}
                dataSource={this.state.data}
                pagination={pagination}
                loading={this.state.loading}
                onChange={this.handleTableChange}
                className="tab"
        />
        </div>
        )
    }
}

export default Artical;